<template>
  <div class="app-container">
    <el-form
      ref="formRef"
      label-width="auto"
      :model="formData"
      :rules="formRules"
      style="width: 75%"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="系统标题" prop="sys_name">
            <el-input v-model="formData.sys_name" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12"></el-col>
      </el-row>
      <!-- <el-row>
        <el-col :span="12">
          <el-form-item label="管理员密码" prop="password">
            <el-input
              v-model="formData.password"
              type="password"
              show-password
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="确认密码" prop="checkPass">
            <el-input
              v-model="formData.checkPass"
              type="password"
              show-password
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row> -->
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="基础评分"
            prop="base_score"
            class="form-item-flex"
          >
            <el-col :span="12">
              <el-input-number
                v-model="formData.base_score"
                :min="0"
                :max="100"
                clearable
              />
            </el-col>
            <span class="tip">系统初始评分(0-100)</span>
          </el-form-item>
        </el-col>
        <el-col :span="12"></el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="保底评分"
            prop="guaranteed_score"
            class="form-item-flex"
          >
            <el-col :span="12">
              <el-input-number
                v-model="formData.guaranteed_score"
                :min="0"
                :max="100"
                clearable
              />
            </el-col>
            <span class="tip">系统出现的最低评分(0-100)</span>
          </el-form-item>
        </el-col>
        <el-col :span="12"></el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="提交频率/天"
            prop="submit_frequency"
            class="form-item-flex"
          >
            <el-col :span="12">
              <el-input-number
                v-model="formData.submit_frequency"
                :min="1"
                clearable
              />
            </el-col>
            <span class="tip">相同用户参与评价的频率</span>
          </el-form-item>
        </el-col>
        <el-col :span="12"></el-col>
      </el-row>

      <el-form-item>
        <el-button type="primary" @click="submitForm(formRef)">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { ref, onMounted, computed } from "vue";
import { ElMessage } from "element-plus";

import { useManageStore } from "@/stores";
const manageStore = useManageStore();

const formRef = ref(null);
const formData = ref({});

const settingInfo = computed({
  // 读取值
  get() {
    return manageStore.settingInfo;
  },
  // 写入值
  set(newVal) {
    manageStore.setSettingInfo(newVal);
  },
});

const validatePass = (rule, value, callback) => {
  if (!value) {
    callback(new Error("请输入密码"));
  } else {
    if (formData.value.checkPass !== "") {
      if (!formRef.value) return;
      formRef.value.validateField("checkPass", () => null);
    }
    callback();
  }
};
const validatePass2 = (rule, value, callback) => {
  if (!value) {
    callback(new Error("请再次输入密码"));
  } else if (value !== formData.value.password) {
    callback(new Error("两次密码不一致!"));
  } else {
    callback();
  }
};
const formRules = {
  // title: [{ required: true, message: "请输入系统标题" }],
  //   password: [{ validator: validatePass, trigger: "blur" }],
  //   checkPass: [{ validator: validatePass2, trigger: "blur" }],
};

const getSetting = () => {
  manageStore
    .getSetting()
    .then((res) => {
      formData.value = JSON.parse(JSON.stringify(res));
    })
    .catch((error) => {
      console.log(error);
    });
};

const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log(formData.value, "submit!");
      // todo 提交基本设置接口
      manageStore
        .submitSetting(formData.value)
        .then((res) => {
          if (res.code === 200) {
            ElMessage.success("提交成功");
            // todo 基本设置存入store
            settingInfo.value = formData.value;
          } else {
            ElMessage.error(res.info);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
onMounted(() => {
  getSetting();
});
</script>
<style lang="scss">
.app-container {
  background: #fff;
  .tip {
    color: #999;
    margin-left: 10px;
  }
}
</style>
